import React, { FC } from 'react'
import styled from 'styled-components'

export interface ListTopActionItem {
	text: string
	onClick: React.MouseEventHandler
	disabled?: boolean
}

export type ListTopProps = {
	title?: string
	num?: number
	actions: ListTopActionItem[]
}

const Wrap = styled.div`
	height: 30px px;
	line-height: 30px;
	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #949799;
	}
	.list-top__num {
		margin-left: 8px;
		font-weight: bold;
	}
	.list-top__right {
		float: right;
		span {
			margin-right: 10px;
			color: #007ac0;
			text-decoration: underline;
			cursor: pointer;
			&:last-child {
				margin-right: 0;
			}
		}
	}
`
export const ListTop: FC<ListTopProps> = (props) => {
	return (
		<Wrap>
			{props.children ? (
				props.children
			) : (
				<>
					<span className="list-top__title">{props.title}</span>
					<span className="list-top__num">{props.num}</span>
				</>
			)}
			<div className="list-top__right">
				{props.actions.map((item) => (
					<span key={item.text} onClick={item.onClick}>
						{item.disabled && <span style={{ color: 'rgb(182, 182, 182)' }}>{item.text}</span>}
						{!item.disabled && <span>{item.text}</span>}
					</span>
				))}
			</div>
		</Wrap>
	)
}
